@charset 'utf-8';
//@import "reset";
$font-size: 20px;
@function r($px) {
    @return $px / $font-size * 1rem;
}
@mixin center{
    overflow: hidden;
    position: absolute;
    left: -999px;
    right: -999px;
    margin: auto;
}
html,body{
    width: 100%;
    height: 100%;
}
#result{
    display: none;
//  opacity: 0;
    transition: all .5s;
    width:100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
//  background: yellow;
    .result-bg{
        width: r(231px);
        height: r(269px);
        position: absolute;
        @include center;
        top: r(122px);
        overflow: initial;
        img{
            @include center;
            top: -999px;
            bottom: -999px;
            transform-origin: 50% 51%;
//      animation: rotate 30s infinite linear;
        }
    }
    .user-message{
        width: r(294px);
        height: r(108px);
        background: url(../img/result-page/user-title-bg.png) no-repeat;
        background-size: 100%;
        position: absolute;
        left: r(15px);
        top: r(16px);
        line-height: r(108px);
        .user-icon{
            width: r(70px);
            height: r(70px);
            border-radius: 50%;
            overflow: hidden;
            vertical-align: middle;
            position: absolute;
            top: r(18px);
            left: r(22px);
            z-index: 2;
            img{
                width: 110%;
            }
        }
        .username{
            margin-left: r(145px);
            font-size: r(24px);
        }
    }
    .result-logo{
        width: r(262px);
        height: r(78px);
        overflow: hidden;
        position: absolute;
        right: r(16px);
        top: r(16px);
        img{
            width: 100%;
            vertical-align: middle;
        }
    }
    .duanwei{
        width: r(231px);
        height: r(269px);

        @include center;
        top: r(122px);
        img{
            width: 100%;
        }
    }
    .answer-result{
        width: r(340px);
        height: r(102px);

        @include center;
        top:r(385px);
        background: url(../img/result-page/result-answer-bg.png);
        background-size: 100%;
        line-height: r(102px);
        text-align: center;
        font-size: r(50px);
    }
    .wenan{
        width: r(709px);
        height:r(200px);

        background: url(../img/result-page/result-wenan-bg.png) no-repeat;
        background-size:100% ;
        @include center;
        top: r(494px);
        font-size: r(32px);
        line-height: r(56px);
        padding-top: r(36px);  
        .text{
            width: r(580px);
            margin: auto;
            text-align: center;
        }      
    }
    .challengeAgain{
        width: r(305px);
        height: r(114px);
        background: url(../img/result-page/challengeAgain-bg.png) no-repeat;
        background-size: 100%;
        position: absolute;
        top: r(712px);
        left: r(38px);
        animation: challenge 2s infinite linear;
        a{
            margin-left: r(96px);

        }
    }
    a{
        display: inline-block;
        font-size: r(34px);
        width: 100%;
        height: 100%;
        line-height: r(100px);
        margin-left: r(36px);
    }
    .share{
        width: r(346px);
        height: r(112px);
        background: url(../img/result-page/pengyouquan-bg.png) no-repeat;
        background-size: 100%;
        position: absolute;
        top: r(712px);
        right: r(22px);
        overflow: hidden;
        animation: challenge 2s infinite linear;
    }
    .paihang-title{
        width: r(417px);
        height: r(119px);

        @include center;
        top: r(830px);
        z-index: 1;
        
        img{
            width: 100%;
        }
    }
    .paihang-content{
        width: r(685px);
        height: r(282px);
        background: url(../img/result-page/paiming-bg.png);
        background-size: 100%;

        @include center;
        top: r(908px); 
        ul{
            padding-top: r(40px);
            li{
                height: r(70px);
                line-height: r(70px);
                margin-bottom: r(5px);
                &::after{
                    content: "";
                    display: block;
                    clear: both;
                }
                div{
                    float: left;
                }
                .index{
                    width: r(56px);
                    text-align: center;
                    line-height: r(70px);
                    margin-left: r(20px);
                }
                .name{
                    height: r(70px);
                    line-height: r(70px);
                    .user-icon{
                        width: r(70px);
                        height: r(70px);
                        overflow: hidden;
                        display: inline-block;
                        vertical-align: middle;
                        line-height: r(70px);
                        margin-right: r(12px);
                        img{
                            height: 100%;
                        }
                    }
                }
                .pingfen{
                    float: right;
                    height: r(70px);
                    line-height: r(70px);
                    .duanwei-icon{
                        display: inline-block;
                        width: r(48px);
                        height: r(66px);
                        overflow: hidden;
                        vertical-align: middle;
                        margin: 0 r(50px) 0 r(22px);
                        img{
                            width: 100%;
                        }
                    }
                }
            }
        }     
    }
}
@keyframes challenge{
    0%{ transform: translateX(0px);}
    25%{ transform: translateX(-5px);}
    50%{ transform: translateX(0px);}
    75%{transform: translateX(5px);}
    100%{transform: translateX(0px);}
}